<template>
  <div id="formbx">
    <h2>报修信息</h2>
    <span></span>
    <el-form
      v-loading="loading"
      :label-position="'top'"
      label-width="auto"
      :model="formdata"
      :rules="rules"
      ref="formdata"
      class="form"
      style="-webkit-tap-highlight-color: transparent;"
    >
      <el-form-item id="network" label="网络环境" prop="network">
        <el-select v-model="formdata.network" placeholder="请选择网络环境">
          <el-option label="有线连接" value="有线连接"></el-option>
          <el-option label="无线Young" value="无线Young"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        id="young"
        label="请问您宿舍的其他手机电脑用wifi能否正常上网？"
        prop="young"
        v-if="formdata.network=='无线Young'"
      >
        <el-select v-model="formdata.young" placeholder="请选择能否正常使用">
          <el-option label value="正常"></el-option>
          <el-option label value="无法使用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item id="port" label="请选择端口状态图：" prop="port" v-if="formdata.network=='有线连接'">
        <el-select v-model="formdata.port">
          <el-option value="正常"></el-option>
          <el-option value="红叉"></el-option>
          <el-option value="黄感叹号"></el-option>
        </el-select>
        <img src="../../assets/images/portinfo.jpg" alt="提示图" />
      </el-form-item>
      <el-form-item
        id="test"
        label="请使用您的网口连接您舍友电脑进行测试，能否进行上网："
        prop="test"
        v-if="formdata.port=='红叉'||formdata.port=='黄感叹号'"
      >
        <el-select v-model="formdata.test" placeholder="请选择测试结果">
          <el-option label value="正常"></el-option>
          <el-option label value="红叉"></el-option>
          <el-option label value="黄感叹号"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        id="errcode"
        label="错误代码"
        prop="errcode"
        v-if="formdata.young=='正常'||formdata.port=='正常'||formdata.test=='黄感叹号'"
      >
        <el-select v-model="formdata.errcode" placeholder="请选择错误代码">
          <el-option label value="1xx"></el-option>
          <el-option label value="其它错误"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        id="portnum"
        label="请根据下面图示输入网口编号的信息"
        prop="portnum"
        v-if="formdata.errcode=='1xx'||formdata.test=='红叉'"
      >
        <el-input v-model.number="formdata.portnum"></el-input>
        <img src="../../assets/images/portid.jpg" alt="提示图" />
      </el-form-item>

      <el-form-item
        id="stuId"
        label="学号："
        prop="number"
        v-if="formdata.young=='无法使用'||formdata.errcode=='1xx'||formdata.test=='红叉'"
      >
        <el-input v-model="formdata.stuId" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item
        id="name"
        label="姓名："
        prop="name"
        v-if="formdata.young=='无法使用'||formdata.errcode=='1xx'||formdata.test=='红叉'"
      >
        <el-input v-model="formdata.name" placeholder="请输入姓名" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"></el-input>
      </el-form-item>
      <el-form-item
        id="phone"
        label="手机号："
        prop="phone"
        v-if="formdata.young=='无法使用'||formdata.errcode=='1xx'||formdata.test=='红叉'"
      >
        <el-input v-model="formdata.phone" placeholder="请输入手机号" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"></el-input>
      </el-form-item>

      <el-form-item
        id="place"
        label="地点："
        prop="place"
        v-if="formdata.young=='无法使用'||formdata.errcode=='1xx'||formdata.test=='红叉'"
      >
        <el-input v-model="formdata.place" placeholder="请输入地点"></el-input>
      </el-form-item>
      <el-form-item
        id="descrip"
        label="错误描述："
        prop="descrip"
        v-if="formdata.young=='无法使用'||formdata.errcode=='1xx'||formdata.test=='红叉'"
      >
        <el-input v-model="formdata.descrip" type="textarea" placeholder="怎么坏的？坏了多久？"></el-input>
      </el-form-item>

      <el-form-item label="错误描述：" prop="descrip2" v-show="false">
        <!--此项渲染但不显示，作用是解决portnum表单项必填验证失效bug -->
        <el-input></el-input>
      </el-form-item>

      <el-form-item id="norange" v-if="formdata.errcode=='其它错误'||formdata.test=='正常'">
        <p style="color:#0075a9;font-size:20px;">抱歉，该维修不在范围内!</p>
      </el-form-item>
      <el-form-item>
        <el-button id="tjbtn" type="primary" @click="submitForm('formdata')">提交</el-button>
        <el-button @click="resetForm('formdata')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import FastClick from "fastclick";
//FastClick.attach(document.body);//解决ios端需双击的问题

export default {
  data() {
    // 自定义验证规则,需放return前面
    var validateNumber1 = (rule, value, callback) => {
      if (this.formdata.portnum == "") {
        callback(new Error("请输入端口号"));
      } else if (
        this.formdata.portnum.toString().length < 1 ||
        this.formdata.portnum.toString().length > 8
      ) {
        callback(new Error("字段长度应在1~8之间"));
      } else {
        callback();
      }
    };
    //验证数字
    var validateNumber2 = (rule, value, callback) => {
      if (this.formdata.stuId == "" || isNaN(this.formdata.stuId)) {
        callback(new Error("请输入正确的学号"));
      } else if (this.formdata.stuId.trim().toString().length !== 11) {
        callback(new Error("学号长度应为11位,且不能含有空格"));
      } else {
        callback();
      }
    };
    //手机号
    var validateNumber3 = (rule, value, callback) => {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      hidden: [
        "young",
        "port",
        "test",
        "port",
        "errcode",
        "portnum",
        "stuId",
        "phone",
        "name",
        "place",
        "descrip",
        "norange"
      ], //存放需隐藏的表单项
      formdata: {
        network: "", //网络环境："有线连接"or"无线Young"
        young: "", //Young wifi下其他设备能否使用："正常"or"无法使用"
        port: "", //有线端口状态："正常"or"红"or"黄"
        test: "", //有线下更换舍友电脑的测试结果："正常"or"红"or"黄""
        errcode: "", //错误码："1xx"or"其它错误"
        portnum: "", //端口号："A51"

        stuId: "", //学号
        name: "", //姓名
        phone: "", //电话
        place: "", //地点
        descrip: "" //描述
      },
      rules: {
        network: [{ required: true, message: "请选择" }],
        young: [{ required: true, message: "请选择" }],
        port: [{ required: true, message: "请选择" }],
        test: [{ required: true, message: "请选择" }],
        errcode: [{ required: true, message: "请选择" }],
        portnum: [
          { required: true, validator: validateNumber1, trigger: "blur" }
        ],
        number: [
          { required: true, validator: validateNumber2, trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名" }],
        phone: [
          { required: true, validator: validateNumber3, trigger: "blur" }
        ],
        place: [{ required: true, message: "请输入地点" }],
        descrip: [{ required: true, message: "请输入错误描述" }],
        descrip2: [{ required: false }]
      },
      loading: false
    };
  },
  mounted() {
    FastClick.attach(document.body); //解决ios端需双击的问题
  },
  updated() {
    // 将v-if隐藏的表单项的数据值清空，即可隐藏之前显示的表单项，避免表单项错误重复显示
    this.hidden.forEach(id => {
      if (!document.getElementById(id)) {
        this.formdata[id] = ""; //注：不能写this.formdata.id=''，这样js会把id作为一个新的属性值，而不是匹配
      }
    });

    // 提交禁止功能
    if (document.getElementById("norange")) {
      document.getElementById("tjbtn").className =
        "el-button el-button--primary is-disabled";
    } else {
      document.getElementById("tjbtn").className =
        "el-button el-button--primary";
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (document.getElementById("norange")) {
          return;
        }
        if (valid) {
          this.loading = true;
          this.$axios
            .get("/api/order/addOrder", { params: this.formdata })
            .then(res => {
              this.loading = false;
              if (res.data.status == 1) {
                this.$alert("提交成功!", {
                  confirmButtonText: "确定",
                  center: true,
                  callback: action => {
                    this.$refs[formName].resetFields();
                    this.$router.push({
                      path: "/table/listinfo/" + res.data.orderId
                    });
                  }
                });
              } else {
                this.$alert("提交失败：" + res.data.message, {
                  confirmButtonText: "确定",
                  center: true
                });
              }
            })
            .catch(err => {
              this.loading = false;
              this.$alert("网络错误，请稍后再试", {
                confirmButtonText: "确定",
                center: true
              });
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
#formbx {
  max-width: 1200px;
  margin: 0 auto;
  h2 {
    color: #0075a9;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }
  .form {
    margin: 0 auto;
    max-width: 320px;
  }
  //loading图标位置
  /deep/ .el-loading-spinner {
    top: 86%;
  }
}
</style>